// We intentionally want to style all descendants with these classes.
// stylelint-disable selector-max-compound-selectors

.web-content {
    .theme-dark:not(.theme-redesign) & {
        color: var(--body-color);

        --body-color: #{$gray-06};
        --link-color: var(--web-content-link-color);
    }
    .theme-light:not(.theme-redesign) & {
        --link-color: var(--web-content-link-color);
    }

    h1,
    h2 {
        .theme-dark:not(.theme-redesign) & {
            color: $gray-08;
        }

        .theme-light:not(.theme-redesign) & {
            color: $gray-17;
        }
    }

    h3 {
        .theme-dark:not(.theme-redesign) & {
            color: $gray-08;
        }

        .theme-light:not(.theme-redesign) & {
            color: $gray-15;
        }
    }

    h4 {
        .theme-light:not(.theme-redesign) & {
            color: $gray-14;
        }
    }

    h5 {
        .theme-dark:not(.theme-redesign) & {
            color: $gray-04;
        }

        .theme-light:not(.theme-redesign) & {
            color: $gray-13;
        }
    }
    h6 {
        .theme-dark:not(.theme-redesign) & {
            color: $gray-04;
        }

        .theme-light:not(.theme-redesign) & {
            color: $gray-13;
        }
    }
}
